<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="../../PC/css/reset.css">
	<script src="../js/rem.js"></script>
	<style>
		.box{
			min-height: 100vh;
		}
		.head{
			width: 100vw;
			height: .7rem;
			display: flex;
			align-items: center;
			/* border-bottom: 1px solid #999; */
			box-shadow: 0px 00px 7px #999;
		}
		.head div{
			width: 50vw;
			text-align: center;
			height: 100%;
			line-height:.7rem;
		}
		.popupState,.popupCJ{
			position: fixed;
			z-index: 2;
			background-color: #fff;
			bottom: 0;
			left: 0;
			height: 0;
			width: 100vw;
			transition: all .3s linear;
			box-shadow: 0px 0px 6px #999;
		}
		.popupState ul li{
			text-align: center;
			height: .65rem;
			line-height: .65rem;
			border-bottom: 1px solid #e6e4e4;
		}
		.popupCJ ul li{
			text-align: center;
			height: .65rem;
			line-height: .65rem;
			border-bottom: 1px solid #e6e4e4;
		}
		.list-wrap{
			padding: 5px;
			max-height: 87vh;
		}
		.list-wrap li{
			padding: 5px 0;
			display: flex;
			border-bottom: 1px solid #dad8d8;
		}
		.name-state{
			font-size: 0.3rem;
			font-weight: 700;
			display: flex;
			justify-content: space-between;
		}
		.goods-pic{
			position: relative;
			width: 1.5rem;
			height: 1.7rem;
			border: 1px solid #999;
			margin-right: 3px;
		}
		.tip{
			position: absolute;
			width: .35rem;
			height: .35rem;
			background-color: red;
			text-align: center;
			line-height: .35rem;
			color: #fff;
			border-radius: 50%;
			top: 0;
			right: 0;
		}
		.goods-pic img{
			width: 100%;
		}
		.info{
			width: 76vw;
			line-height: .5rem;
		}
		.price-date{
			display: flex;
			justify-content: space-between;
		}
		.footer{
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			box-shadow: 0px 0px 6px #999;
		}
		.footer div{
			width: 33.3vw;
			height: 6vh;
			line-height: 6vh;
			text-align: center;
		}
		.active{
			font-size: .4rem;
			color: rgb(59, 59, 245);
			font-weight: 700;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="head">
			<div onclick="filtterGoods()" class="cjState">成交状态</div>
			<div onclick="filtterState()" class="CJ">出价</div>
		</div>
		<ul class="list-wrap">
			<!-- <li>
				<div class="goods-pic">
					<img src="https://t10.baidu.com/it/u=3839672595,2326927231&fm=58" alt="">
					<span class="tip">1</span>
				</div>
				<div class="info">
					<div class="name-state">
						<span>手机名称</span>
						<span>下架</span>
					</div>
					<div>
						黑色/8+256G
					</div>
					<div class="price-date">
						<span>
							当前价格 <b>25</b>
						</span>
						<span>发布时间<b>2011-11-11</b></span>
					</div>
				</div>
			</li> -->
		</ul>
		<div class="footer">
			<div class="active">列表</div>
			<div onclick="addGoods()">新增</div>
			<div>我的</div>
		</div>
	</div>
	<div class="popupState">
		<ul>
			<li>已成交</li>
			<li>未成交</li>
		</ul>
	</div>
	<div class="popupCJ">
		<ul>
			<li>已出价</li>
			<li>未出价</li>
		</ul>
	</div>
	<script src="../../public1/js/pubilc.js"></script>
	<script>
		var PPXH=null
		var neicun = [{structure:'4+32',id:1},{structure:"4+64",id:2},{structure:"4+128",id:3},{structure:"8+256",id:4},{structure:"8+512",id:5},{structure:"12+256",id:6},{structure:"12+512",id:7},{structure:"12+1T",id:8},{structure:"16+256",id:9},{structure:"16+512",id:10},{structure:"16+1T",id:11},{structure:"24+1T",id:12},{structure:"无",id:13}]
		window.onload = function(){
			/*
				检验token的有效性 TODO 
			*/
			if(!splitToken('token')){
				location.replace('./login.html')
				return
			}
			getPPXH()
			
		}

		var popup = document.querySelector('.popupState')
		var popupCJ = document.querySelector('.popupCJ')
		var listWrap = document.querySelector('.list-wrap')
		function getPPXH(){
			xhr({
			url:'/pc/class/get',
			success:function(res){
				PPXH = res.data
				getList(1,10)
			}
		})
		}
		function getList(page,size){
			xhr({
				url:`/goods/get`,
				methods:'post',
				data: JSON.stringify({
					pageNumber:page,
					pageSize:size
				}),
				success:function(res){
					console.log(res)
					if(res.code==200){
						var _data_ = res.data.records
						for(var i=0;i<_data_.length;i++){
							listWrap.innerHTML+=`<li>
								<div class="goods-pic">
									<img src=${_data_[i].phone_pic.split(',')[0]} alt="">
									<span class="tip">1</span>
								</div>
								<div class="info">
									<div class="name-state">
										<span>${handleMap(_data_[i].phone_brand)} ${handleMapTwo(_data_[i].phone_type_num)}</span>
										<span>${_data_[i].phone_state==1?'上架':'下架'}</span>
									</div>
									<div>
										${_data_[i].phone_color} / ${handelNeicun(_data_[i].phone_memory)[0].structure}
									</div>
									<div class="price-date">
										<span>
											当前价格 <b>25</b>
										</span>
										<span>发布时间<b>${_data_[i].create_time}</b></span>
									</div>
								</div>
							</li>`
						}
					}
				}
			})
		}
		function handleMap(id){
			var result =''
			for(var i=0;i<PPXH.one.length;i++){
				if(PPXH.one[i].Id == id){
					result = PPXH.one[i].brand_name
				}
			}
			return result
		}
		function handleMapTwo(id){
			var result =''
			for(var i=0;i<PPXH.two.length;i++){
				if(PPXH.two[i].Id == id){
					result = PPXH.two[i].xinghao_content

				}
			}
			return result
		}
		function handelNeicun(id){
			return neicun.filter(function(item){
				return item.id == id
			})
		}
		function filtterGoods(){
			popup.style.height='1.5rem'
		}
		function filtterState(){
			popupCJ.style.height='1.5rem'
		}
		window.addEventListener('click',function(e){
			if(e.target.className!='popupState' && (e.target.className!='cjState')){
				popup.style.height='0'
			}
			if(e.target.className!='popupCJ' && (e.target.className!='CJ')){
				popupCJ.style.height='0'
			}
		})
		function addGoods(){
			location.href="./add.html?token="+splitToken('token')
		}
	</script>
</body>
</html>